<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- 核心样式 -->
  <link rel="stylesheet" href="./css/index.css">
  <title>个人信息设置</title>
</head>

<body>
  <!-- toast 提示框 -->
  <div class="toast my-toast" data-bs-delay="1000">
    <div class="toast-body">
      <div class="alert alert-success info-box">
        操作成功
      </div>
    </div>
  </div>
  <!-- 核心内容区域 -->
  <div class="container">
    <ul class="my-nav">
      <li class="active">基本设置</li>
      <li>安全设置</li>
      <li>账号绑定</li>
      <li>新消息通知</li>
    </ul>
    <div class="content">
      <div class="info-wrap">
        <h3 class="title">基本设置</h3>
        <form class="user-form" action="javascript:;">
          <div class="form-item">
            <label for="email">邮箱</label>
            <input id="email" name="email" class="email" type="text" placeholder="请输入邮箱" autocomplete="off">
          </div>
          <div class="form-item">
            <label for="nickname">昵称</label>
            <input id="nickname" name="nickname" class="nickname" type="text" placeholder="请输入昵称" autocomplete="off">
          </div>
          <div class="form-item">
            <label>性别</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="0">男</label>
            <label class="male-label"><input type="radio" name="gender" class="gender" value="1">女</label>
          </div>
          <div class="form-item">
            <label for="desc">个人简介</label>
            <textarea id="desc" name="desc" class="desc" placeholder="请输入个人简介" cols="20" rows="10"
              autocomplete="off"></textarea>
          </div>
          <button class="submit">提交</button>
        </form>
      </div>
      <div class="avatar-box">
        <h4 class="avatar-title">头像</h3>
          <img class="prew" src="./img/头像.png" alt="">
          <label for="upload">更换头像</label>
          <input id="upload" type="file" class="upload">
      </div>

    </div>
  </div>
  <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
  <script src="./lib/axios.min.js"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> -->
  <script src="./lib/bootstrap.min.js"></script>
  <script src="./lib/form-serialize.js"></script>
  
</body>
<script>
    // <!-- 核心逻辑 -->
    /**
     * 目标1：信息渲染
     *  1.1 获取用户的数据
     *  1.2 回显数据到标签上
     * */

      const creator = "king";
      const userForm = document.querySelector(".user-form")

      // 1.1 获取用户的数据
      const render = ()=>{
        // 1 获取用户的数据
        axios({
          url:"https://hmajax.itheima.net/api/settings",
          method:"GET",
          params:{
            creator:creator
          }
        }).then(res=>{
            // console.log(res);
            //解构赋值
            const { data } = res.data
            // console.log(Object.keys(data));
            // 2 回显数据到标签上
            Object.keys(data).forEach(item=>{
              // console.log(item);
              if (item == "avatar") {
                  document.querySelector(".prew").src = data[item]
              } else if(item == "gender"){
                const genders =  document.querySelectorAll('[name=gender]')
                // console.log(genders,data[item]);
                const index = data[item]
                genders[index].checked = true

              }else {
                // 绑定二个input  一个textarea
                // console.log(userForm.querySelector(`[name="${item}"]`));
                
                userForm.querySelector(`[name="${item}"]`).value = data[item]
                
              }
              
            })
  
        })
      }

      render();

      const myToast = document.querySelector('.my-toast')
      const toastObj = new bootstrap.Toast(myToast)

      /**
       * 目标2: 图像更换
       *  2.1 点击按钮 选择图片
       *  2.2 axios 上传图片
       *  2.3 回显图片
      */

      document.querySelector(".upload").addEventListener("change",e=>{
          // 获取图片
          console.log(e.target.files[0]);
          // FormData对象来上传图片
          const fd = new FormData()
          fd.append('avatar',e.target.files[0])
          fd.append('creator',creator)
          axios({
            url:"https://hmajax.itheima.net/api/avatar",
            method:"PUT",
            data:fd
          }).then(res=>{
              console.log(res);
              toastObj.show()
              document.querySelector(".info-box").innerHTML = res.data.message;
              document.querySelector(".prew").src = res.data.data.avatar;
          })
          
      })

      /**
       * 目标3: 修改数据并提交
       *  3.1 点击提交按钮,获取全部数据
       *  3.2 修改数据
       *  3.3 提交数据
       *  3.4 回显数据
      */

      document.querySelector(".submit").addEventListener("click",e=>{
        // 获取全部数据
        const obj = serialize(userForm,{hash:true,empty:true})
        console.log(obj);
        obj.creator =creator;
        obj.gender = +obj.gender
        console.log(obj);
        if (obj.email=="" || obj.nickname =="" || obj.desc=="" ) {
          alert("数据不能为空")
        }
        axios({
            url:"https://hmajax.itheima.net/api/settings",
            method:"PUT",
            data:obj
          }).then(res=>{
              console.log(res);
              /**
               * 目标4: 提示组件使用
               *  4.1 获取提示组件
               *  4.2 生成组件实例对象
               *  4.3 调用对象的显示方法
               */
              toastObj.show()
              document.querySelector(".info-box").innerHTML = res.data.message;
              
          }).catch(err=>{
            console.log(err);
            
          })
        

      })



  </script>

</html>